import {ref, toValue, watchEffect} from 'vue'

export function useFetch(url) {
    const data = ref(null)
    const error = ref(null)

    watchEffect(async () => {
        // reset state before fetching...
        data.value = null
        error.value = null

        // resolve the url value synchronously so it's tracked as a dependency by watchEffect()
        const urlValue = toValue(url)

        try {
            // artificial delay / random error
            await timeout()
            // unref() will return the ref value if it's a ref
            // otherwise the value will be returned as-is
            const res = await fetch(urlValue)
            data.value = await res.json()
        } catch (e) {
            error.value = e
        }
    })

    return { data, error }
}

// artificial delay
function timeout() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (Math.random() > 0.3) {
                resolve()
            }else {
                reject(new Error('Random Error'))
            }
            }, 3000)
    })
}